<template>
	<view class="container">
		<view style="display: flex;">
			<view class="" style="margin-right: 40rpx;flex: 1;" >	
				<u-search placeholder="搜索你想要的游戏" searchIcon="/static/search.png" height="70rpx" :searchIconSize="18" bgColor="#F2F2F2" :showAction="false" :disabled="true" @click="goSearch()">
				</u-search>
			</view>
			<view style="display: flex;position: relative;" v-on:click="goMsg()">
				<u-icon name="/static/xiaox.png" size="24"></u-icon>
				<u-badge :isDot="true" type="error" :absolute="true" :offset="[24,-3]"></u-badge>
			</view>
		</view>
		<view style="display: flex;justify-content: center;padding: 40rpx 0;">
			<view style="color: #5E666E;font-size: 36rpx;font-weight: 600;" :class="{'active':cate==1}" v-on:click="change(1)">游戏排行</view>
			<view style="color: #96999C;font-size: 36rpx;padding: 0 10rpx;" >/</view>
			<view style="color: #5E666E;font-size: 36rpx;font-weight: 600;" :class="{'active':cate==2}" v-on:click="change(2)">最新游戏</view>
		</view>
		<view class="u-page">
			<u-list
				@scrolltolower="scrolltolower"
			>
				<u-list-item
					v-for="(item, index) in gameList"
					:key="index"
				>
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<view style="display: flex;margin-right: 20rpx;">
							<image v-if="index == 0" src="/static/phb1.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<image v-if="index == 1" src="/static/phb12.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<image v-if="index == 2" src="/static/phb13.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<text v-if="index > 2" style="margin:20rpx 0;width: 50rpx;height: 50rpx;text-align: center;font-size: 36rpx;font-weight: 600;" >{{index+1}}</text>
						</view>
						<view style="display: flex;margin-right: 20rpx;">
							<image :src="item.image" style="margin:20rpx 0;border-radius:28rpx;width: 128rpx;height: 128rpx;"></image>
						</view>
						<view style="">
							<view class="gametext" style="font-size: 30rpx;font-weight: 600;">{{item.name}}</view>
							<view class="gametext" style="font-size: 24rpx;color: #6D747A;">{{item.intro}}</view>
							<view class="gametext" style="font-size: 24rpx;color: #6D747A;">{{item.catename}}</view>
						</view>
					</view>
					<view style="align-items: center;">
						<view style="background-color: #DDFAFC;color: #10C4CB;font-size: 24rpx;text-align: center;border-radius: 60rpx;line-height: 24rpx;display: inline-block;padding: 14rpx 40rpx;" v-on:click="navto(item.game_url)">秒玩</view>
					</view>
				</view>
				</u-list-item>
				<u-loadmore :status="status" nomoreText="我也是有底线的" :line="true" />
			</u-list>
			
		</view>
	</view>
</template>

<script>
	import {getGameNew,getRank} from  "@/api/api.js"
	export default {
		data() {
			return {
				page:1,
				limit:10,
				cate:1,
				isEnd:false,
				status:'loading',
				gameList: [],
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				
				if(!this.isEnd){
					this.page +=1;
					this.loadmore()
				}
				
			},
			loadmore() {
				getRank(this.page,this.limit,this.cate).then(res=>{
					this.gameList.push(...res.data)
					if(res.data.length<this.limit){
						this.isEnd=true;
						this.status = 'nomore';
					}
				});
			},
			change(val){
				this.cate = val;
				this.page = 1;
				this.gameList = [];
				this.isEnd=false;
				this.loadmore()
			},
			navto(val){
				if (uni.getStorageSync('uid')){
					uni.navigateTo({
						url:'/pages/webview/webview?gameurl='+val
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			goSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			goMsg(){
				uni.navigateTo({
					url:'/pages/msg'
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.grid-text {
		font-size: 26rpx;
		font-weight: 600;
		font-family: 'MicrosoftYaHei';
	}
	.active{
		color: #12BAC9!important;
	}
	.gametext{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:240rpx;
	}
</style>
